<script lang="ts" setup>
import type { VbenFormProps } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';

import { Button, Modal } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';

import { useRouter } from 'vue-router';

const router = useRouter();

interface RowType {
  id: string;
  applyId: string;
  time: string;
  staff: string;
  status: string;
  remark: string;
}

const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: false,
  schema: [
    {
      component: 'Input',
      fieldName: 'productName',
      label: '日期',
    },
    {
      component: 'Input',
      fieldName: 'productName',
      label: '审核人',
    },
    {
      component: 'Input',
      fieldName: 'productName',
      label: '处理结果',
    },
  ],
  // 控制表单是否显示折叠按钮
  showCollapseButton: true,
  // 按下回车时是否提交表单
  submitOnEnter: false,
};

const gridOptions: VxeGridProps<RowType> = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  columns: [
    { field: 'id', title: '审核步骤' },
    { field: 'applyId', title: '申请ID' },
    { field: 'time', title: '审核时间' },
    { field: 'staff', title: '审核人' },
    { field: 'status', title: '处理结果' },
    { field: 'remark', title: '备注' },
  ],
  height: 'auto',
  keepSource: false,
  pagerConfig: {},
  data: [
    {
      id: '1',
      applyId: '1',
      time: '2022-01-01 10:00:00',
      staff: '张三',
      status: '通过',
      remark: '无',
    },
    {
      id: '2',
      applyId: '1',
      time: '2022-01-01 10:00:00',
      staff: '李四',
      status: '通过',
      remark: '无',
    },
  ],
};

const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });

function routerPush(name: string, id: number) {
  // 这里就是路由跳转，也可以用path
  router.push({ name: name, params: { id } });
}
</script>

<template>
  <Page auto-content-height>
    <Grid>
      <template #toolbar-tools>
        <Button class="mr-2" type="primary">导出</Button>
      </template>
    </Grid>
  </Page>
</template>
